import gulp from 'gulp';
import gulpif from 'gulp-if';
import concat from 'gulp-concat';
import webpack from 'webpack';
import gulpWebpack from 'webpack-stream';
import named from 'vinyl-named';
import livereload from 'gulp-livereload';
import plumber from 'gulp-plumber';
import rename from 'gulp-rename';
import uglify from 'gulp-uglify';
import {log,colors} from 'gulp-util';
import args from './util/args';

// gulp.src(globs)                
//    说明：src方法是指定需要处理的源文件的路径，globs参数必填（源文件路径）；
                                                     
// gulp.dest(path)                
//    说明：dest方法是指定处理完后文件输出的路径。

// gulp.task(name[, deps], fn)    
//    说明：task定义一个gulp任务。
//    参数： name－任务的名称； deps－此任务依赖的其他任务； fn－此任务进行的操作

// gulp.watch(glob [, opts], tasks)
//    说明：watch方法是用于监听文件变化，文件一修改就会执行指定的任务

// gulp的插件库相当的丰富，与插件结合使用可以实现强大的功能，我们上面的过程中就用到了很多插件。比如：

// gulp-less：将less处理为css文件。
// gulp-concat：可以把多个文件合并为一个文件。
// gulp-minify-css：压缩css文件。
// gulp-rename：重命名文件。
// 还有很多其他有用的插件，坐个简单的整理：

// gulp-imagemin: 压缩图片。
// gulp-uglify: 压缩js文件。
// gulp-jshint: 检查js
// gulp-htmlmin: 压缩html
// gulp-livereload: 服务器控制客户端同步刷新(修改文件，浏览器自动刷新)
// run-sequence: 让gulp任务，可以相互独立，解除任务间的依赖，增强task复用

gulp.task('scripts',()=>{
    return gulp.src(['app/js/index.js'])
      .pipe(plumber({
        errorHandle:function(){
  
        }
      }))
      .pipe(named())
      .pipe(gulpWebpack({
        module:{
          loaders:[{
            test:/\.js$/,
            loader:'babel'
          }]
        }
      }),null,(err,stats)=>{
        log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
          chunks:false
        }))
      })
      .pipe(gulp.dest('server/public/js'))
      .pipe(rename({
        basename:'cp',
        extname:'.min.js'
      }))
      .pipe(uglify({compress:{properties:false},output:{'quote_keys':true}}))
      .pipe(gulp.dest('server/public/js'))
      .pipe(gulpif(args.watch,livereload()))
  })